<template>
	<su-popup :show="show" type="bottom" round="40" :isMaskClick="true" backgroundColor="#fff"
		@close="emit('close')">
		<view class="order-box">
			<view class="goods ss-flex">
				<image class="goods-left" :src="sheep.$url.cdn(data.image)" mode="aspectFill"></image>
				<view class="goods-right ss-flex flex-column justify-between align-start">
					<view class="goods-r-top ss-flex justify-between align-center">
						<view class="goods-r-name ss-line-1">{{data.title}}</view>
						<view class="goods-r-close" @click="emit('close')"></view>
					</view>
					<view class="goods-r-bottom ss-flex justify-between align-center">
						<view class="goods-r-price">￥{{data.price}}</view>
						<view class="goods-r-num ss-flex align-center">
							<image class="goods-num-item" @click="NumDown" src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/group/group-down.png"></image>
							<view class="goods-num-text">{{state.num}}</view>
							<image class="goods-num-item" @click="NumUp" src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/group/group-up.png"></image>
						</view>
					</view> 
				</view>
			</view>
			<view class="details ss-m-t-30 ss-p-30">
				<view class="price ss-flex justify-between align-center">
					<view class="price-left">商品总价(共{{state.num}}件)</view>
					<view class="price-num">￥{{original}}</view>
				</view>
				<view class="discount-box ss-p-y-30">
					<view class="discount ss-flex justify-between align-center">
						<view class="discount-left">团购优惠</view>
						<view class="discount-right">{{discount}}</view>
					</view>
					<view class="coupon ss-flex justify-between align-center ss-m-t-10">
						<view class="coupon-left">银贯宝优惠券</view>
						<view class="coupon-right ss-flex align-center">
							<view class="coupon-tips">暂无可用</view>
							<uni-icons type="right" size="14" color="#868686"></uni-icons>
						</view>
					</view>
				</view>
				<view class="sum ss-m-t-30">小计￥{{price}}</view>
			</view>
			<view class="notice ss-p-30 ss-m-t-25">
				<view class="notice-title ss-m-b-20">购买须知</view>
				<view class="notice-content">
					<view>·退款规则：随时退、过期退</view>
					<view>·为保护未成年人健康成长，未成年用户请得到监护人知悉同意后再进行购买和体验，请勿购买不合适自身年龄段的产品</view>
				</view>
			</view>
			<view class="btn-box">
				<view class="ss-p-y-30 ss-flex justify-center">
					<view class="confirm" @click="onSubmit">立即支付￥{{price}}</view>
				</view>
			</view>
		</view>
	</su-popup>
</template>

<script setup>
	import {
		computed,
		reactive,
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	
	const emit = defineEmits(['close'])
	
	const props = defineProps({
		show:{
			type:Boolean,
			default: true,
		},
		data:{
			type:Object,
			default:{}
		}
	})
	
	const state = reactive({
		num:1,
		request:false
	})
	
	// 计算现价 * 数量
	const price = computed(()=>{
		let money = Number(props.data.price) * state.num
		return sheep.$helper.numFunc(money)
	})
	
	// 计算原价 * 数量
	const original = computed(()=>{
		let money = Number(props.data.original_price) * state.num
		return sheep.$helper.numFunc(money)
	})
	
	// 计算优惠 * 数量
	const discount = computed(()=>{
		if (props.data.is_discount === 0) {
			return '￥0'
		}
		let money = (Number(props.data.original_price) - Number(props.data.price)) * state.num
		return `-￥${sheep.$helper.numFunc(money)}`
	})
	
	const NumUp = () => {
		if (state.num === props.data.stocks) {
			return 
		}
		state.num++
	}
	
	const NumDown = () => {
		if (state.num === 1) {
			return 
		}
		state.num--
	}
	
	const onSubmit = async () => {
		// 防止点击多次 创建多个订单
		if (state.request) {
			return
		}
		
		state.request = true
		
		// 创建订单
		const {error,data} = await sheep.$api.merchant.createGroup({
			order_type: "group",
			goods_list: [
				{
					"goods_id": props.data.id,
					"goods_num": state.num
				}
			],
			share_id: "",
		})
		emit('close')
		if (error === 0) {
			if (data.status === 'paid') {
				sheep.$router.redirect('/pages/pay/effect', {
					orderSN: data.order_sn,
				});
			} else {
				sheep.$router.redirect('/pages/pay/more', {
					orderSN: data.order_sn,
				});
			}
		}else if (error === 1){
			state.request = false
		}
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}
	
	.order-box {
		width: 100%;
		/* #ifdef MP||H5 */
		height: 1074rpx;
		/* #endif */
		// 兼容ipad
		
		/* #ifdef APP */
		height: 955rpx;
		/* #endif */
		
		
		
		background: #F0F0F0;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx 24rpx;
		position: relative;
		
		.goods {
			.goods-left {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}
			
			.goods-right {
				flex: 1;
				height: 160rpx;
				padding-top: 4rpx;
				
				.goods-r-top {
					width: 100%;
					.goods-r-name {
						font-weight: 500;
						font-size: 32rpx;
						color: #2A2A2A;
					}
					
					.goods-r-close {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background-image: url('https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/group/group-close.png');
						background-size: cover;
					}
				}
				
				.goods-r-bottom {
					width: 100%;
					.goods-r-price {
						font-weight: bold;
						font-size: 26rpx;
						color: #282828;
					}
					
					.goods-r-num {
						.goods-num-item {
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
						}
						
						.goods-num-text {
							font-weight: 400;
							font-size: 26rpx;
							color: #282828;
							margin: 0 30rpx;
						}
					}
				}
			}
		}
		
		.details {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			
			.price {
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #E7E7E7;
				
				.price-left {
					font-weight: 400;
					font-size: 28rpx;
					color: #282828;
				}
				
				.price-num {
					font-weight: bold;
					font-size: 28rpx;
					color: #282828;
				}
			}
			
			.discount-box {
				border-bottom: 1rpx solid #E7E7E7;
				.discount {
					.discount-left {
						font-weight: 400;
						font-size: 28rpx;
						color: #282828;
					}
					.discount-right {
						font-weight: 400;
						font-size: 28rpx;
						color: #282828;
					}
				}
				
				.coupon {
					.coupon-left {
						font-weight: 400;
						font-size: 28rpx;
						color: #282828;
					}
					
					.coupon-right {
						.coupon-tips {
							font-weight: 400;
							font-size: 24rpx;
							color: #A1A1A1;
							margin-right: 10rpx;
						}
					}
				}
			}
			
			.sum {
				font-weight: 400;
				font-size: 28rpx;
				color: #282828;
				text-align: right;
			}
		}
		
		.notice {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			
			.notice-title {
				font-weight: 400;
				font-size: 24rpx;
				color: #606060;
			}
			
			.notice-content {
				font-weight: 400;
				font-size: 24rpx;
				color: #606060;
			}
		}
		
		.btn-box {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			background: #FFFFFF;
			
			.confirm {
				width: 702rpx;
				/* #ifdef MP||H5 */
				height: 80rpx;
				line-height: 80rpx;
				/* #endif */
				
				
				/* #ifdef APP */
				height: 70rpx;
				line-height: 70rpx;
				/* #endif */
				
				
				background: #F46800;;
				border-radius: 40rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				
				text-align: center;
			}
		}
	}
</style>